<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			#div1{width: 500px; height: 500px; border: 1px solid black; margin: 100px auto; position: relative;}
			#ball{width: 20px; height: 20px; background-color: red; position: absolute; border-radius: 50%}
			#bat{width: 100px; height: 20px; background-color: blue; position: absolute; bottom: 0px; left: 200px}
		</style>
		<script>
			window.onload = function(){
				var oDiv = document.getElementById("div1");
				var oBall = document.getElementById("ball");
				var oBat = document.getElementById("bat");


				//让拍子可以水平方向移动
				dragX(oBat);


				//随机一个水平方向的速度
				var speedX = parseInt(Math.random() * 4) + 4;
				//随机一个垂直方向的速度
				var speedY = parseInt(Math.random() * 3) + 6;

				setInterval(function(){
					oBall.style.left = oBall.offsetLeft + speedX + 'px';
					oBall.style.top = oBall.offsetTop + speedY + 'px';
					if(oBall.offsetLeft >= 480 || oBall.offsetLeft <= 0){
						speedX *= -1;
					}
					if(oBall.offsetTop >= 480 || oBall.offsetTop <= 0){
						speedY *= -1;
					}

				}, 30);



			}

			//封装一个可以水平方向拖拽的方法
			function dragX(node){
				node.onmousedown = function(ev){
					var e = ev || window.event;
					var offsetX = e.clientX - node.offsetLeft;

					document.onmousemove = function(ev){
						var e = ev || window.event;
						var l = e.clientX - offsetX;
						//限制出界
						if(l <= 0){
							l = 0;
						}
						if(l >= 400){
							l = 400;
						}
						node.style.left = l + 'px';
					}
				}

				document.onmouseup = function(){
					document.onmousemove = null;
				}
			}
		</script>
	</head>
	<body>
		<div id = 'div1'>
			<div id = 'ball'></div>
			<div id = 'bat'></div>
		</div>
	</body>
</html>


